<template>
    <div class="message">
        <mt-header fixed title="消息通知" id="header1"></mt-header>
        <div class="back" @click="backPage">
            <img src="../assets/image/back.png" alt="" />
        </div>
        <div class="messageContent">
             <!-- navbar -->
            <mt-navbar class="tab" v-model="checked">
                <mt-tab-item id="waitFor">待办</mt-tab-item>
                <mt-tab-item id="allMessage">通知:全部消息</mt-tab-item>
            </mt-navbar>
            <mt-tab-container  v-model="checked">
               
                <mt-tab-container-item id="allMessage" style="display:block;" class="scrollContent">
                    <div class="msg">
                        <!-- 发表时间 -->
                        <p class="time">8月20日 08:49</p>
                        <div class="msgs clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                        <div class="msgs  clearfix">
                            <div class="touxiang">
                                <img src="../assets/image/back1.png" alt="">
                            </div>
                            <div class="msgsContent">
                                <p class="title">雷达监测</p>
                                <div class="title_c">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </div>
                        </div>
                    </div>
                </mt-tab-container-item>
                 <mt-tab-container-item id="waitFor" style="display:block;">
                    暂无待办通知~
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
        <div class="input_txt">
            <el-form ref="form">
                <el-form-item>
                    <el-input type="text"></el-input>
                    <el-button type="primary">发送</el-button>
                </el-form-item>
          </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            checked:'allMessage',
            time:""
        }
    },
    mounted() {
        
    },
    methods:{
        backPage(){
            this.$parent.$router.go(-1);
        }
    }
}
</script>
<style scoped lang="scss">
     .message{
        width:100vw;
        position:relative;
        overflow: hidden;
        .back{
            position:fixed;
            left:0;
            top:0;
            width:10vw;
            height:40px;
            z-index:6;
            img{
                margin-top:4px;
                display:block;
            }
        }
        .messageContent{
            width:100vw;
            overflow: hidden;
            margin-top:2.5rem;
        }
        .messageContent{
            .scrollContent{
                width:100%;
               
           
            .msg{
                margin-top:20px;
                .time{
                    width:30vw;
                    height:20px;
                    line-height:20px;
                    margin:auto;
                    background-color:azure;
                }
            }
            .msgs{
                width:85vw;
                margin:20px auto 10px;
                .touxiang{
                    width:10vw;
                    height:10vw;
                    border-radius: 50%;
                    float:left;
                    background-color:#1b3464;
                    img{
                        display: block;
                        margin:4px auto 0;
                        
                    }
                }
                .msgsContent{
                    width:65vw;
                    float:left;
                    margin-left:5vw;
                    text-align: left;
                    background-color:#f3f3f3;
                    padding:5px;
                    .title{
                        
                        line-height:30px;

                    }
                    .title_c{
                        line-height:20px;
                    }
                }
            }
            }
        }
        .input_txt{
            width:100vw;
            height:50px;
            position:fixed;
            bottom:0;
            left:0;
            background-color:#1b3464;
        }
    }
</style>


